import React from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  Alert,
} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {useNavigation} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import NotificationPage from '../view/NotificationPage';
import DataManagement from '../view/DataManagementPage';

const logo = require('../../assets/icon.png');
const MyPageScreen = () => {
  const settings = [
    {
      icon: 'chatbubble-ellipses-outline',
      text: '推送通知',
      route: 'NotificationPage',
    },
    {icon: 'menu', text: '数据管理', route: 'DataManagement'},
    {icon: 'grid', text: '菜单设置', route: 'MenuSettings'},
    {icon: 'information-circle-outline', text: '关于', route: 'AboutPage'},
    {
      icon: 'trash-outline',
      text: '清除缓存',
      click: () => {
        Alert.alert('清除缓存', '', [
          {
            text: '取消',
            style: 'cancel',
          },
          {
            text: '确定',
            onPress: () => {
              console.log('已清除缓存');
            },
          },
        ]);
      },
    },
  ];

  const navigation = useNavigation<any>(); // 新增

  return (
    <View style={styles.container}>
      <View style={styles.userInfoContainer}>
        <View style={styles.userInfoInner}>
          <Image source={logo} style={styles.avatar} />
          <View style={styles.userText}>
            <Text style={styles.name}>MrD</Text>
            <Text style={styles.email}>carry5250@163.com</Text>
          </View>
        </View>
      </View>
      <View style={styles.settingsContainer}>
        {settings.map((item, index) => (
          <TouchableOpacity
            key={index}
            style={styles.settingItem}
            onPress={() => {
              if (item.route) navigation.navigate(item.route);
              if (item.click) item.click();
            }}>
            <Icon
              name={item.icon}
              size={20}
              color="#666"
              style={styles.settingIcon}
            />
            <Text style={styles.settingText}>{item.text}</Text>
            <Icon name="chevron-forward-outline" size={20} color="#999" />
          </TouchableOpacity>
        ))}
      </View>
      <TouchableOpacity style={styles.logoutButton}>
        <Text style={styles.logoutText}>退出登录</Text>
      </TouchableOpacity>
    </View>
  );
};

const Stack = createStackNavigator();
export const MyPageStack = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="MyPage"
      options={{headerShown: false, headerTitle: ''}}
      component={MyPageScreen}
    />
    <Stack.Screen name="NotificationPage" component={NotificationPage} />
    <Stack.Screen name="DataManagement" component={DataManagement} />
    {/* <Stack.Screen name="MenuSettings" component={MenuSettings} />
    <Stack.Screen name="AboutPage" component={AboutPage} /> */}
  </Stack.Navigator>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  userInfoContainer: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 15,
    margin: 15,
  },
  userInfoInner: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 15,
  },
  userText: {
    flex: 1,
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  email: {
    fontSize: 14,
    color: '#666',
  },
  settingsContainer: {
    backgroundColor: '#fff',
    borderRadius: 10,
    margin: 15,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  settingIcon: {
    marginRight: 15,
  },
  settingText: {
    flex: 1,
  },
  logoutButton: {
    backgroundColor: '#f5f5f5',
    borderRadius: 25,
    padding: 10,
    margin: 15,
    alignItems: 'center',
  },
  logoutText: {
    color: '#ff3b30',
    fontWeight: 'bold',
  },
});
